<template>
  <!-- <button @click="handleClick">test</button> -->
  <p>{{personCopy.name}}</p>

  <ul>
    <li v-for="item in arrCopy" :key="item">{{item}}</li>
  </ul>
</template>

<script>

import { reactive } from 'vue'

export default {
  name: 'App',
  setup (props, context) {
    // 非响应式的数据
    /* 
    let name = 'liuxin'
    setTimeout(() => {
      name = 'hello'
    }, 1000);
    return {
      name
    }
    */

    // 响应式的数据
    // 通过proxy对数据进行封装, 当数据变化的时候触发模板的更新

    const person = {
      name: 'liuxin',
      age: 18
    }
    let personCopy = reactive(person)
    let arrCopy = reactive([1])
    
    console.log(person === personCopy) // false

    setTimeout(() => {
      personCopy.name = 'Jack'
      arrCopy.push('2')
    }, 2000);
    return {
      personCopy,
      arrCopy
    }
  }
}
</script>

<style>

</style>
